<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <title>Ymall</title>
    <style>
        .inp{
            width: 280px;
            height: 32px;
            border-radius: 18px;
            font-size: 20px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column login">
            <form role="form" id="form">
                <div class="form-group">
                    <img src="img/pic.png" alt="" style="width: 100%; border-radius: 5%">
                </div>
                <div class="form-group">
                    <label for="username">用户名：</label>&nbsp;&nbsp;&nbsp;<input type="text" class="input inp" id="username" name="username"/>
                </div>
                <div><strong>性别:</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><input type="radio" name="sex" value="男生">男生</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><input type="radio" name="sex" value="女生">女生</label>
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" class="input inp" id="password" name="password"/>
                </div>
                <div class="form-group">
                    <label for="repassword">确认密码：</label><input type="password" class="input inp" id="repassword"/>
                </div>
                <div class="form-group">
                    <label for="phone">手机号：</label>&nbsp;&nbsp;&nbsp;<input type="number" class="input inp" id="phone" name="phone"/>
                </div>
                <div class="form-group">
                    <label for="sno">学号：</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" class="input inp" id="sno" name="sno"/>
                </div>
                <div class="form-group">
                    <label for="uclass">班级：</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="input inp" id="uclass" name="uclass"/>
                </div>
<!--                <div class="form-group">-->
<!--                    <label for="realname">Realname</label><input type="text" class="form-control" id="realname" />-->
<!--                </div>-->
<!--&lt;!&ndash;                <div><strong>性别：</strong>&ndash;&gt;-->
<!--&lt;!&ndash;                    <label for="male">男<input type="radio" id="male" value="1"/></label>&ndash;&gt;-->
<!--&lt;!&ndash;                    <label for="female">女<input type="radio" id="female" value="0"/></label>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->

<!--                <div class="form-group">-->
<!--                    <label for="dormitory">Dormitory</label><input type="text" class="form-control" id="dormitory" />-->
<!--                </div>-->
<!--                <div class="form-group" style="margin-left: 70%">-->
<!--                    <label>忘记密码？</label>-->
<!--                </div>-->
                <button type="button" id="register" class="btn btn-default" style="margin-left: 40%">注册</button>
                <!--                <div class="form-group">-->
                <label style="margin-left: 26%;"><a href="Login.html">返回登录</a></label>
                <!--                </div>-->
            </form>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>
<script>
    $("#register").click(function () {

        $.ajax({
            type: "POST",   //提交的方法
            url:"http://localhost:8080/ycumall/UserServlet?method=register", //提交的地址
            data:$('#form').serialize(),// 序列化表单值
            async: false,
            error: function(request) {  //失败的话
                alert("注册失败!");
            },
            success: function(data) {  //成功
                if(data.status === 200) {
                    alert("注册成功!");
                    window.location.href="Login.html";
                } else {
                    alert("注册失败!");
                }
            }
        });
    });
</script>
</body>
</html>